<template>
  <view class="login-container">
    <view class="login-header">
        <view class="logo">
      <image src="https://sp4-lanqiao-shop-vue.netlify.app/img/lanqiao-logo.5de12f2e.svg" />
      </view>
      <text class="title">用户注册</text>
    </view>
    <view class="input-group">
      <label class="input-label">昵称：</label>
      <input class="input-field" type="text" v-model="name" placeholder="请输入昵称" />
    </view>
    <view class="input-group">
      <label class="input-label">用户名：</label>
      <input class="input-field" type="text" v-model="username" placeholder="请输入用户名" />
    </view>
    <view class="input-group">
      <label class="input-label">密码：</label>
      <input class="input-field" type="password" v-model="password" placeholder="请输入密码" />
    </view>
     <view class="input-group">
      <label class="input-label">确认密码：</label>
      <input class="input-field" type="password" v-model="repeatpassword" placeholder="请重复密码" />
    </view>
    <view class="button-group">
   
      <button class="register-button" @click="register()">注册</button>
    </view>
  </view>
</template>

<script>
<<<<<<< HEAD
import config from "../../config.js"
	
	export default {
	  data() {
	    return {
	      username: '',
	      password: '',
	      repeatpassword: '',
	      name: ''
	    };
	  },
	  methods: {
	    regTest() {
	      const reg = /^[A-Za-z][A-Za-z0-9]*$/;
	      if (reg.test(this.username)) {
	        console.log("ture");
	        return true;
	      } else {
	        uni.showToast({ title: '用户名只能包含字母和数字，且以字母开头', icon: 'none' });
	        return false;
	      }
	    },
	    generateToken() {
	      return Math.random().toString(36).substr(2) + Math.random().toString(36).substr(2); // 随机token
	    },
	    async register() {
	      // 前端验证流程
	      if (!this.name.trim()) {
	        uni.showToast({ title: '昵称不能为空', icon: 'none' });
	        return;
	      }
	
	      if (!this.regTest()) {
	        return;
	      }
	      if (this.username.trim() === '' || this.password.trim() === '' || this.repeatpassword.trim() === '') {
	        uni.showToast({ title: '用户名、密码、确认密码不能为空', icon: 'none' });
	        return;
	      }
	      if (this.password!== this.repeatpassword) {
	        uni.showToast({ title: '两次密码不一致', icon: 'none' });
	        return;
	      }
	
	      if (this.username.length < 6 || this.password.length < 6) {
	        uni.showToast({ title: '账号密码需至少6位', icon: 'none' });
	        return;
	      }
	
	      // 服务端验证
	      try {
	        const checkRes = await uni.request({
	          url: config.URL + `/users?username=${this.username}`,
	          method: 'GET'
	        });
	        if (checkRes.data.length > 0) {
	          uni.showToast({ title: '用户名已存在', icon: 'none' });
	          return;
	        }
	
	        const token = this.generateToken();
	        await uni.request({
	          url: config.URL + '/users',
	          method: 'POST',
	          data: {
	            username: this.username,
	            password: this.password,
	            name: this.name,
	            token: token
	          }
	        });
	
	        uni.showToast({ title: '注册成功,请登录', icon:'success' });
	        setTimeout(() => uni.navigateTo({ url: '/pages/login/index' }), 2000);
	      } catch (error) {
	        uni.showToast({ title: '注册失败', icon: 'none' });
	      }
	    }
	  }
	};
=======
import axios from 'axios';
export default {
  data() {
    return {
      username: '',
      password: '',
      repeatpassword: '',
      name: ''
    };
  },
  methods: {
    regTest(){
      const reg = /^[A-Za-z][A-Za-z0-9]*$/;
      if (reg.test(this.username)) {
        console.log("ture");
        return true;
      }else{
          uni.showToast({ title: '用户名只能包含字母和数字，且以字母开头', icon: 'none' });
      return false;
      }
    
    },
    generateToken() {
      return Math.random().toString(36).substr(2) + Math.random().toString(36).substr(2);//随机token
    },
    async register() {
      // 前端验证流程
      if (!this.name.trim()) {
        uni.showToast({ title: '昵称不能为空', icon: 'none' });
        return;
      }

      if (!this.regTest()) {
        return;
      }
      if(this.username.trim() === '' || this.password.trim() === '' || this.repeatpassword.trim() === ''){
        uni.showToast({ title: '用户名、密码、确认密码不能为空', icon: 'none' });
        return;
      }
      if (this.password !== this.repeatpassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' });
        return;
      }

      if (this.username.length < 6 || this.password.length < 6) {
        uni.showToast({ title: '账号密码需至少6位', icon: 'none' });
        return;
      }

      // 服务端验证
      try {
        const checkRes = await axios.get(`http://localhost:3000/users?username=${this.username}`);
        if (checkRes.data.length > 0) {
          uni.showToast({ title: '用户名已存在', icon: 'none' });
          return;
        }

        const token = this.generateToken();
        await axios.post('http://localhost:3000/users', {
          username: this.username,
          password: this.password,
          name: this.name,
          token: token
        });

        uni.showToast({ title: '注册成功,请登录', icon: 'success' });
        setTimeout(() => uni.navigateTo({ url: '/pages/login/index' }), 2000);
      } catch (error) {
        uni.showToast({ title: '注册失败', icon: 'none' });
      }
    }
  }
};
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
</script>

<style scoped>
.logo{
  position: relative;
  z-index: 99;
}
.login-container {
  font-family: 'Poppins', sans-serif;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 16px;
}

.login-header {
  margin-bottom: 24px;
}

.title {
  font-size: 2em;
  font-weight: 600;
  color: #007AFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-left: 90px;
}

.input-group {
  width: 80%;
  margin-bottom: 16px;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: white;
  text-align: left;
}

.input-field {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  transition: box-shadow 0.3s ease;
}

.input-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px #007AFF;
}

.button-group {
  width: 40%;
}

.login-button, .register-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.3s ease;
}



.register-button {
   background: #007AFF;
  color: white;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
}

.register-button:hover {
  background: #005ec2;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 122, 255, 0.3);
}
</style>
